﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login</title>
<script type="text/javascript" src="jquerymini.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//控制注册框动画
	$(".regfont").click(function(){//点击注册按钮时关闭或者打开注册框
		$("#regbox").slideToggle("slow");//如果隐藏就显示，反之...
		return false;
	});
	//关闭注册框动画
	$(".delete").click(function(){//关闭注册框
		$("#regbox").animate({top:"-100px",opacity:"hide"},1000).animate({top:"0px"})//在1秒钟里动画向上移动100个像素，然后移动到初始位置
	});
	//控制登录框动画
	$(".loginfont").click(function(){//点击登录按钮时关闭或者打开登录框
		$(".loginbox").animate({opacity:"toggle",left:"50px"},1000).animate({left:"10px"},"fast");//如果隐藏则显示，向右移动50像素
		return false;
	});
	//小图标晃动动画	
	$("#nav").find("img").mouseover(function(){
    $(this)
      .animate({ left: -20 })
      .animate({ left: 20 })
      .animate({ left: -20 })
      .animate({ left: 20 })
	  .animate({ left: -20 })
	  .animate({ left: 20 })
      .animate({ left: 0 });
	 });
	 //notice动画
	 $("#notice").animate({opacity:"show"},000).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).animate({opacity:"0.1"},200).animate({opacity:"0.9"},200).slideUp("slow").slideDown("slow");
	 setTimeout("$('#siderbar').slideUp('slow').slideDown('slow')",1000);//1秒钟以后折叠然后展开层silderbar
	 //控制右侧BOX框动画
	 setTimeout("$('#rightbox').show('slow')",2000);//2秒钟以后显示隐藏层rightbox
	 //控制右侧BOX框内的DD显示与隐藏
		
	 //第一个基本效果
	 $("#rightbox").find("dt:first").click(function(){
	 	$(this).next().toggle("slow");
	 });
	 //第二个滑动效果
	 $("#rightbox").find("dt:eq(1)").click(function(){
	 	$(this).next().slideToggle("slow");
	 });
	 //第三个淡入淡出
	  $("#rightbox").find("dt:eq(2)").click(function(){
	 	$(this).next().animate({opacity:"toggle"},"slow")
	 });
	 //第四个自定义动画，这里的toggle(fn1,fn2)意思是：每次点击时切换要调用的函数fn1,fn2
	  $("#rightbox").find("dt:last").toggle(function(){
	 	$(this).next().animate({height:"100px"},"slow").animate({height:"toggle"});
		imgsrc.attr("src","images/down.png")
	 },function(){
	 	$(this).next().animate({height:"toggle"}).animate({height:"80px"},"slow");
		imgsrc.attr("src","images/up.png")
	 });

		//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，
		//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。	
		var imgsrc=$("#rightbox > dl >dt > img");
		$("#rightbox").find("dt:lt(3)").toggle(function(){
		imgsrc.attr("src","images/down.png")
		},function(){
		imgsrc.attr("src","images/up.png")
		});
})
</script>
<style>
* { margin:0; padding:0}
ul { list-style:none}
body{ background:#000; font-size:12px;}
#loginbar {width:100%;height:30px;background-color:#930003;color:#FFFFFF;filter:Alpha(style=1,opacity=100,finishOpacity=0); line-height:30px; text-indent:20px; border-bottom:1px solid #FFF; }
#loginbar a:link { color:#FFFFFF}
#loginbar a:visited { color:#FFFFFF}
#loginbar a:hover { color:#FFCC00}
#leftbox { width:28%; height:600px; float:left;}

/*right box*/
#rightbox { width:69%; height:575px; background:#930003; border:1px solid #932C00; margin-top:5px;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100); display:none; float:left ; background:#571600; margin-left:5px; padding:5px}
#regbox { width:90%; height:auto; color:#FFFFFF; font-weight:bold; background:#930003; border:1px solid #FFF; border-top:none; margin-top:-3px;z-index:5; position:relative; float:right; padding:5px;display:none}
* html #regbox {margin-top:-1px;}
#regbox input { width:80%}
#regbox .delete { position:absolute; bottom:12px;right:20px; cursor:pointer}
#regbox fieldset { padding:3px; text-align:center; line-height:22px; width:90%; margin:0 auto;}
.mleft { margin-left:10px; color:#FF9900}
.fleft { float:left; width:auto}
.right{ float:right; width:auto}
.fullwidth { width:100%}
.loginbox { display:none; position:relative;}
* html .loginbox { margin-top:3px;}
.submit {width:50px; background:#930003; color:#FFFFFF; font-weight:bold; margin-top:3px;}
* html .submit { margin-top:0}
/*nav*/
#nav { width:auto; height:auto;position:relative; margin-top:3px;}
#nav ul li { list-style:none; display:inline; line-height:30px;}
#nav ul li img { position:relative; cursor:pointer;}
/*notice*/
#notice { width:90%; height:80px;background:#930003; border:1px solid #FFF; position:relative;text-align:center; color:#FFCC00; line-height:25px; float:right; margin:5px 0 5px 0; padding:5px;}
/*Myinfo*/
#siderbar { width:90%; background:#930003; border:1px solid #FFF;height:477px; position:relative;filter:Alpha(startX=0, startY=100, finishX=0, finishY=0,style=1,opacity=0,finishOpacity=100);color:#FC0; font-weight:bold; float:right; line-height:22px; padding:5px;}
.photo { float:left; margin-right:5px; margin-bottom:10px;}
.photo img { width:144px; height:192px; border:1px solid #FF9900;}
.clear { clear:both}
.rtitle { background:#999900; border-left:10px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px;}
.rcontent { width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px;}
#rightbox dl { width:100%; height:auto}
#rightbox dt{ background:#999900; border-left:10px solid #FF9900;border-bottom:1px solid #FF9900; width:99%; height:30px; line-height:30px; font-size:14px; font-weight:bold; text-indent:10px; cursor:pointer; position:relative}
#rightbox dt img { position:absolute; right:10px; top:10px;}
#rightbox dd {width:96%; border:1px solid #CCCCCC; height:auto; color:#FFFFFF; line-height:20px; padding:5px; margin:0 auto; margin-top:5px;margin-bottom:5px; background:#000000}
</style>
</head>

<body>
<!--login bar Start-->
<div id="loginbar">
		<div class="fleft"><a  class="loginfont" href="http://www.baidu.com">登录Demo</a></div>
        <div class="fleft loginbox">
        	<div class="fleft">用户名：<input type="text" /> </div>
    		<div class="fleft">密&nbsp;&nbsp;码：<input type="password" /></div>
            <div class="fleft"><input type="submit" value="提交"  class="submit"/></div>
        </div>
		<div class="fleft">&nbsp;&nbsp;<a  class="regfont" href="http://www.baidu.com">注册Demo</a></div>
		<div class="fleft"><span class="mleft">demo:褪色</span></div>
        <div id="nav" class="fleft">
			<ul>
				<li><img src="images/01.png" /></li>
				<li><img src="images/02.png" /></li>
				<li><img src="images/03.png" /></li>
				<li><img src="images/04.png" /></li>
				<li><img src="images/05.png" /></li>
				<li><img src="images/06.png" /></li>
				<li><img src="images/07.png" /></li>
				<li><img src="images/08.png" /></li>
			</ul>
		</div>
</div>
<div class="clear"></div>
<div id="leftbox">
	<div id="regbox">
	<form action="" name="form1">
		<fieldset>
    		<legend>注册信息</legend>
			<table width="100%">
            <tr><td width="40%">用户名：</td><td><input type="text" /></td></tr>
    		<tr><td>密&nbsp;&nbsp;码：</td><td><input type="password" /></td></tr>
            <tr><td>提示问题：</td><td><input type="text" /></td></tr>
            <tr><td>问题答案：</td><td><input type="text" /></td></tr>
            <tr><td colspan="2"><input type="submit" value="提交" class="submit" /></td></tr></table>
  		  </fieldset>
	</form>
	<img class="delete" src="images/shut.gif" title="关闭" />
	</div>
	<!--login bar Over-->
	<div id="notice">
	<h4>本页面为jQuery Animate演示</h4>
	<h3>Demo:褪色</h3>
	</div>
	<!--myinfo-->
	<div id="siderbar">
		<div class="photo"><img src="images/2.jpg" /></div>
    	<p>
    ←-----it's me!
    hello,我是褪色，
    OK，废话不多说，本页面演示了jQeruy部分动画Animate效果，
    这看起来似乎很酷，能让我们的网页更加招人喜爱，不仅如此，这些
    看上去很酷的效果对jQuery来说简直是小菜一碟！
    由于我太菜了，所以要努力跟大家学习啊，对了，因为没装IE7，所以没有考虑IE7所以不知道在IE7下有什么问题。

   		 </p>
	</div>
</div>
<div id="rightbox">
	<dl>
    	<dt>基本动画<img src="images/up.png" /></dt>
        <dd>
        	<ul><li>show()显示隐藏的匹配元素</li>
            <li>hide()隐藏显示的元素</li>
            <li>toggle()切换元素的可见状态</li>
            <li>括号里有两个参数(speed,fn)速度和回调函数,速度有fast,normal,slow三种，fn函数在动画结束后返回的函数命令</li>
            </ul>
        </dd>
    </dl>
    <dl>
    	<dt>滑动效果<img src="images/up.png" /></dt>
        <dd>
        	<ul><li>slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素</li>
            <li>slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素</li>
            <li>slideToggle()通过高度变(向下增大 or 向上减小)化来切换所有匹配元素的可见性</li>
            <li>这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。</li>
            </ul>
        </dd>
    </dl>
    <dl>
    	<dt>淡入淡出<img src="images/up.png" /></dt>
        <dd>
			<ul><li>fadeIn通过不透明度的变化来实现所有匹配元素的淡入效果--显示</li>
            <li>fadeout通过不透明度的变化来实现所有匹配元素的淡入效果--隐藏</li>
            <li>把所有匹配元素的不透明度以渐进方式调整到指定的不透明度</li>
            <li>&nbsp;&nbsp;例子：$("p").fadeTo("slow", 0.66);用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度</li>
            <li>这个效果没有提供切换的函数，好像只可以在自定义的animate里设置opacity:"toggle",效果是一样的</li>
            </ul>
		</dd>
    </dl>
    <dl>
    	<dt>自定义动画<img src="images/up.png" /></dt>
        <dd>
        	<ul>
            	<li>用于创建自定义动画的函数</li>
                <li>这个我解释不好，核心应该是animate，具体请查看API</li>
                <li>//控制标题栏的上下箭头切换，不知道为什么会和最后一个发生了冲突，大概是因为都用了toggle切换函数，导致最后一个出现错误，</li>
				<li>//因此这里使用了dt:lt(3)只应用在前3个DT上了，单独给最后一个又写了一次。</li>
            </ul>
        </dd>
    </dl>

</div>
  
</body>
</html>
